<template>
  <div class="container">
    <el-card style="margin-left:8px; margin-right: 8px;" >
      <!-- 第一行 -->
      <el-row type="flex" justify="space-between">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 关键字 -->
        <el-form-item label="关键字">
          <el-input v-model="formInline.keyword" placeholder="根据文章标题搜索"></el-input>
        </el-form-item>
        <!-- 状态 -->
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option label="启用" :value="0"></el-option>
            <el-option label="禁用" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <!-- 清除搜索按钮 -->
        <el-form-item>
          <el-button @click="delSubmit">清除</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>

      </el-form>
      <!-- 新增 -->
      <el-form-item>
          <el-button type="success" @click="onAdd">新增技巧</el-button>
        </el-form-item>
      </el-row>
      <!-- 第二行 -->
      <el-alert :closable="false" type="info" show-icon >数据一共{{page.total}}条</el-alert>
      <!-- 表格 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="title" label="文章标题"></el-table-column>
        <el-table-column prop="visits" label="阅读数"></el-table-column>
        <el-table-column prop="username" label="录入人"></el-table-column>
        <el-table-column prop="createTime" label="录入时间"></el-table-column>

        <el-table-column prop="state" label="状态">
          <template v-slot="{row}">
            {{row.state === 0 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="240">
          <template v-slot="{row}">
            <el-button type="text" @click="onPreview(row.id)">预览</el-button>
            <el-button type="text" @click="onSwitch(row)">{{row.state === 0 ? '禁用' : '启用' }}</el-button>
            <el-button type="text" :disabled="row.state === 1 ? true : false" @click="onEdit(row.id)">修改</el-button>
            <el-button type="text" :disabled="row.state === 1 ? true : false" @click="onDel(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="top" type="flex" justify="end">
        <el-pagination background layout="prev, pager, next, sizes, jumper" :total="page.total" @size-change="handleSizeChange" :page-sizes="[5, 10, 15, 20]" :page-size="page.pagesize" @current-change="onChange"></el-pagination>
      </el-row>

      <!-- 新增对话框 -->
      <el-dialog style="margin-top: 100px;" :visible="showDialog" v-bind="$attrs" title="新增技巧" v-model="showDialog"  @open="onOpen" @close="close">
        <el-form ref="formRef" :model="form" :rules="rules" size="medium" label-width="100px">
          <el-form-item label="文章标题:" prop="title">
            <el-input v-model="form.title" placeholder="请输入文章标题:" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="文章内容:" prop="articleBody">
            <el-input v-model="form.articleBody" type="textarea" placeholder="请输入文章内容:"
              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="视频地址:" prop="videoURL">
            <el-input v-model="form.videoURL" placeholder="请输入视频地址:" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="handelConfirm">确定</el-button>
        </el-row>
      </el-dialog>
      <!-- 预览弹框 -->
    <el-dialog style="margin-top: 100px;" title="预览文章" :visible="showDialogPreview" v-model="showDialogPreview"  @open="onOpen" @close="close">
      <el-row>
        <div>{{id}}</div>
      </el-row>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { add, changeState, detail, list, remove, update } from '@/api/hmmm/articles'
import moment from 'moment'
export default {
  data () {
    return {
      showDialogPreview: false,
      showDialog: false,
      list: [],
      count: '',
      dialogVisible: false,
      formInline: {
        keyword: undefined,
        state: undefined
      },
      form: {
        title: undefined,
        articleBody: undefined,
        videoURL: undefined
      },
      rules: {
        title: [{
          required: true,
          message: '请输入文章标题:',
          trigger: 'blur'
        }],
        articleBody: [{
          required: true,
          message: '请输入文章内容:',
          trigger: 'blur'
        }],
        videoURL: []
      },
      page: {
        page: 1,
        pagesize: 5,
        total: 0
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 点击新增，显示对话框
    onAdd () {
      this.showDialog = true
    },
    // 点击取消 关闭对话框
    close () {
      this.showDialog = false
      this.form.title = undefined
      this.form.articleBody = undefined
      this.form.videoURL = undefined
    },
    // 新增
    handelConfirm () {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        await add(this.form)
        this.$message.success('操作成功')
        this.getList()
        this.close()
      })
    },
    // 删除
    onDel (id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        await remove(id)
        this.$message.success('操作成功')
        this.getList()
      })
    },
    // 预览
    async onPreview (id) {
      this.showDialogPreview = true
      const res = await detail(id)
      console.log(res)
    },
    // 修改
    async onEdit (id) {
      const res = await update(id)
      console.log(res)
      this.showDialog = true
    },
    // 启用禁用
    async onSwitch (row) {
      row.state = row.state === 1 ? 0 : 1
      const res = await changeState(row)
      this.$message.success('操作成功')
      this.getList()
      // console.log(res)
    },
    // 获取列表
    async getList () {
      const res = await list({ ...this.formInline, ...this.page })
      // console.log(res)
      this.list = res.data.items
      this.list.createTime = moment(this.list.createTime).format('YYYY-MM-DD HH MM SS')
      this.page.total = res.data.counts // total,总条数
    },
    // 获取当前页码的数据
    onChange (val) {
      console.log(`当前页: ${val}`)
      this.page.page = val
      this.getList()
    },
    // 显示每页的总条数
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.page.pagesize = val
      this.getList()
    },
    // 搜索
    onSubmit () {
      console.log('submit!')
      this.getList()
    },
    // 清空内容
    delSubmit () {
      this.formInline.keyword = undefined
      this.formInline.state = undefined
      this.getList()
    },
    resetForm () {
      this.$refs.vForm.resetFields()
    }
  }
}
</script>

<style lang="scss">
.top{
  margin-top: 20px;
}
</style>
<style lang="scss">
  .el-input-number.full-width-input,
  .el-cascader.full-width-input {
    width: 100% !important;
  }

  .el-form-item--medium {
    .el-radio {
      line-height: 36px !important;
    }

    .el-rate {
      margin-top: 8px;
    }
  }

  .el-form-item--small {
    .el-radio {
      line-height: 32px !important;
    }

    .el-rate {
      margin-top: 6px;
    }
  }

  .el-form-item--mini {
    .el-radio {
      line-height: 28px !important;
    }

    .el-rate {
      margin-top: 4px;
    }
  }

  .clear-fix:before,
  .clear-fix:after {
    display: table;
    content: "";
  }

  .clear-fix:after {
    clear: both;
  }

  .float-right {
    float: right;
  }

</style>
<style lang="scss" scoped>
  div.table-container {
    table.table-layout {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;

      td.table-cell {
        display: table-cell;
        height: 36px;
        border: 1px solid #e1e2e3;
      }
    }
  }
  .label-left-align ::v-deep .el-form-item__label {
    text-align: left;
  }

  .label-center-align ::v-deep .el-form-item__label {
    text-align: center;
  }

  .label-right-align ::v-deep .el-form-item__label {
    text-align: right;
  }

  .static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;

    ::v-deep .el-divider--horizontal {
      margin: 0;
    }
  }

</style>
